<template>
  <div @click="clickBanner">
    <div class="banner">
      <img class="image" :src="bannerImg"/>
      <div class="banner-info">
        <div class="banner-title">{{sightName}}</div>
        <div class="banner-number">
          <span class="iconfont">&#xe633;</span>
          {{gallaryImgsCount}}
        </div>
      </div>
    </div>
    <fadeAnimation>
      <commonGallary :images="gallaryImgs" :gallaryShow="gallaryShow"></commonGallary>
    </fadeAnimation>
  </div>
</template>

<script>
import commonGallary from '@/pages/common/gallary/gallary'
import fadeAnimation from '@/pages/common/animation/fade'
export default {
  name: 'detailBanner',
  components: {
    commonGallary,
    fadeAnimation
  },
  props: {
    sightName: String,
    bannerImg: String,
    gallaryImgs: Array
  },
  data () {
    return {
      gallaryShow: false
    }
  },
  computed: {
    gallaryImgsCount () {
      return this.gallaryImgs.length
    }
  },
  methods: {
    clickBanner () {
      this.gallaryShow = !this.gallaryShow
    }
  }
}
</script>

<style lang="stylus" scoped>
  .banner
    overflow hidden
    position relative
    width 100%
    height 0
    padding-bottom 55%
    .image
      width 100%
    .banner-info
      display flex
      position absolute
      left 0
      right 0
      bottom 0
      color #fff
      background-image: linear-gradient(top, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.8))
      .banner-title
        flex 1
        padding 0 .3rem
      .banner-number
        padding 0 .3rem

</style>
